<nz-list nzItemLayout="horizontal" nzBordered [nzLoading]="loading">
  <nz-list-header>
    <nz-input-group [nzPrefix]="prefixIconSearch">
      <input type="text" [(ngModel)]="searchValue" nz-input i18n-placeholder placeholder="Search" />
    </nz-input-group>
    <ng-template #prefixIconSearch>
      <eo-iconpark-icon name="search"></eo-iconpark-icon>
    </ng-template>
  </nz-list-header>
  <nz-list-item *ngFor="let item of seachMember">
    <nz-list-item-meta>
      <nz-list-item-meta-avatar>
        <nz-avatar [nzSize]="44" [nzText]="item.username.at(0)"></nz-avatar>
      </nz-list-item-meta-avatar>
      <nz-list-item-meta-title>
        <div class="flex flex-col">
          <a class="link">{{ item.username }}</a>
          <span>{{item.email || item.mobilePhone}}</span>
        </div>
      </nz-list-item-meta-title>
    </nz-list-item-meta>
    <ul nz-list-item-actions>
      <nz-list-item-action>
        <div class="w-[130px] flex justify-between">
          <span>{{ item.roleName }}</span>
          <ng-container *ngIf="workspaceService.authEnum.canEdit && item.roleName !== 'Owner'">
            <a (click)="handleRemove(item)" i18n>Remove</a>
          </ng-container>
        </div>
      </nz-list-item-action>
    </ul>
  </nz-list-item>
  <nz-list-empty *ngIf="data.length === 0"></nz-list-empty>
</nz-list>
